<template>
  <div class="comments" :style="level===1?myStyle:myStyle2">
    <div
      v-for="(item, i) in comments"
      :key="i"
      class="author-title reply-father"
    >
      <el-avatar
        class="header-img"
        :size="40"
        :src="item.fromHeadImg"
      ></el-avatar>
      <!-- 作者信息——姓名，时间 -->
      <div class="author-info">
        <span class="author-name">{{ item.from }}</span>
        <span class="author-time">{{ item.time }}</span>
      </div>
      <!-- 子评论数 -->
      <div class="icon-btn">
        <span class="reply-comment-btn" @click="showCommentInput(i)">
          <span class="iconfont icon-reply">&#xe606;</span>
          <span>回复</span>
        </span>
        <!-- <span @click="showReplyInput(i, item.name, item.id)"> -->

        <!-- :style="{ 'color': item.inputShow ? 'green' : '#c1c1c1' }" 最高级别，会破坏部分样式 -->
        <span @click="showReplyList(i)" ref="outerComment" class="comment-btn">
          <i class="iconfont">&#xe624;</i>
          {{ item.commentNum }}
        </span>
      </div>
      <!-- 作者评论的内容 -->
      <div class="talk-box">
        <p>
          <span v-show="item.to !== ''" class="reply-to"
            >回复 {{ item.to }}:</span
          >
          <span class="reply">{{ item.comment }}</span>
        </p>
      </div>
      <!-- <div class="talk-box">
        <p>
          <span class="reply">{{ item.comment }}</span>
        </p>
      </div> -->
      <!-- 回复作者的输入框 -->
      <div class="input-comment input-in-comment" v-if="item.isComment">
        <el-row :gutter="20">
          <el-col :span="2">
            <div class="grid-content content-left">
              <img src="../assets/images/face.jpg" class="img-face" />
            </div>
          </el-col>
          <el-col :span="19">
            <div class="grid-content">
              <div class="comment-content">
                <el-form ref="form" :model="commentForm">
                  <el-form-item>
                    <el-input
                      ref="commentInInput"
                      type="textarea"
                      v-model="commentForm.content"
                      :placeholder="`回复 ${item.from}`"
                      maxlength="100"
                      show-word-limit
                      @blur="hiddenCommentInput([i])"
                    >
                    </el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-col>
          <el-col :span="1">
            <div class="grid-content">
              <el-button type="primary" class="submit-comment">发布</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 回复评论的评论 -->
      <CommentTree :comments="item.reply" :level="Number(level)+1"  v-show="item.inputShow"/>
    </div>
  </div>
</template>

<script>
export default {
  props: ["comments","level"],
  data() {
    return {
      commentForm: {
        content: "",
      },
      myStyle:{
        paddingLeft:50+'px',
      },
      myStyle2:{
        paddingLeft:0+'px',
      }
    };
  },
  methods: {
    //收起评论回复
    hiddenCommentInput(arr) {
      let len = arr.length;
      let temp = [];
      if (len == 1) {
        temp = this.comments[arr[0]];
      } else {
        temp = this.comments[arr[0]].reply;
        for (let i = 1; i < len; i++) {
          if (i === len - 1) {
            temp = temp[arr[i]];
          } else {
            temp = temp[arr[i]].reply;
          }
        }
      }
      temp.isComment = false;
    },
    //展开评论回复
    showCommentInput(i) {
      this.comments[i].isComment=true;
      this.$nextTick(() => {
        // console.log(this.$refs.commentInInput);
        this.$refs.commentInInput[0].focus();
      });
    },
    //显示/隐藏子评论
    showReplyList(i) {
      if (this.comments[i].reply.length !== 0) {
        this.comments[i].inputShow = !this.comments[i].inputShow;
        if (this.comments[i].inputShow) {
          this.$refs.outerComment[i].style.color = "#25b6a0";
        } else {
          this.$refs.outerComment[i].style.color = "#c1c1c1";
        }
      }
    },
    inputFocus() {
      var replyInput = document.getElementById("replyInput");
      replyInput.style.padding = "8px 8px";
      replyInput.style.border = "2px solid blue";
      replyInput.focus();
    },
    showReplyBtn() {
      this.btnShow = true;
    },
    hideReplyBtn() {
      this.btnShow = false;
      replyInput.style.padding = "10px";
      replyInput.style.border = "none";
    },
    showReplyInput(i, name, id) {
      this.comments[this.index].inputShow = false;
      this.index = i;
      this.comments[i].inputShow = true;
      this.to = name;
      this.toId = id;
    },
    _inputShow(i) {
      return this.comments[i].inputShow;
    },
    sendComment() {
      if (!this.replyComment) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "评论不能为空",
        });
      } else {
        let a = {};
        let input = document.getElementById("replyInput");
        let timeNow = new Date().getTime();
        let time = this.dateStr(timeNow);
        a.name = this.myName;
        a.comment = this.replyComment;
        a.headImg = this.myHeader;
        a.time = time;
        a.commentNum = 0;
        a.like = 0;
        this.comments.push(a);
        this.replyComment = "";
        input.innerHTML = "";
      }
    },
    sendCommentReply(i, j) {
      if (!this.replyComment) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "评论不能为空",
        });
      } else {
        let a = {};
        let timeNow = new Date().getTime();
        let time = this.dateStr(timeNow);
        a.from = this.myName;
        a.to = this.to;
        a.fromHeadImg = this.myHeader;
        a.comment = this.replyComment;
        a.time = time;
        a.commentNum = 0;
        a.like = 0;
        this.comments[i].reply.push(a);
        this.replyComment = "";
        document.getElementsByClassName("reply-comment-input")[i].innerHTML =
          "";
      }
    },
    onDivInput: function (e) {
      this.replyComment = e.target.innerHTML;
    },
    dateStr(date) {
      //获取js 时间戳
      var time = new Date().getTime();
      //去掉 js 时间戳后三位，与php 时间戳保持一致
      time = parseInt((time - date) / 1000);
      //存储转换值
      var s;
      if (time < 60 * 10) {
        //十分钟内
        return "刚刚";
      } else if (time < 60 * 60 && time >= 60 * 10) {
        //超过十分钟少于1小时
        s = Math.floor(time / 60);
        return s + "分钟前";
      } else if (time < 60 * 60 * 24 && time >= 60 * 60) {
        //超过1小时少于24小时
        s = Math.floor(time / 60 / 60);
        return s + "小时前";
      } else if (time < 60 * 60 * 24 * 30 && time >= 60 * 60 * 24) {
        //超过1天少于30天内
        s = Math.floor(time / 60 / 60 / 24);
        return s + "天前";
      } else {
        //超过30天ddd
        var date = new Date(parseInt(date));
        return (
          date.getFullYear() +
          "/" +
          (date.getMonth() + 1) +
          "/" +
          date.getDate()
        );
      }
    },
  },
};
</script>

<style scoped lang="less">
.img-face {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.submit-comment {
  width: 50px;
  height: 30px;
}
.comments {
  // padding-left: 80px;

  .reply-father {
    border-bottom: 1px solid rgba(178, 186, 194, 0.3);
    margin-top: 10px;
  }
  .author-title {
    text-align: left;
    padding: 5px;
    &:last-child {
      border-bottom: 0px;
    }
  }
  .header-img {
    display: inline-block;
    vertical-align: top;
  }
  .author-info {
    display: inline-block;
    margin-left: 20px;
    width: 60%;
    height: 40px;
    line-height: 20px;
    span {
      display: block;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .author-name {
      font-size: 16px;
    }
    .author-time {
      font-size: 13px;
      color: #c1c1c1;
    }
  }
  .icon-btn {
    width: 30%;
    text-align: right;
    padding: 0 !important;
    float: right;
    @media screen and (max-width: 1200px) {
      width: 20%;
      padding: 7px;
    }
    span {
      cursor: pointer;
    }
    .iconfont {
      margin: 0 5px;
    }

    .reply-comment-btn {
      color: #c1c1c1;
      &:hover {
        color: @themeColor;
      }
      .icon-reply {
        font-size: 22px;
        margin-right: 0px;
        vertical-align: bottom;
      }
    }
    .comment-btn {
      color: #c1c1c1;
      &:hover {
        color: @themeColor;
      }
    }
  }
  .talk-box {
    margin: 10px 50px;
    .reply-to {
      color: #c1c1c1;
    }
    p {
      margin: 0;
    }
    .reply {
      font-size: 16px;
    }
  }
  .input-in-comment {
    margin-left: 50px;
    border-top: 0px;
  }
  .reply-box {
    margin: 10px 0 0 50px;
    // background-color:#efefef;
  }
  .my-reply {
    padding: 10px;
    // background-color:#fafbfc;
    .header-img {
      display: inline-block;
      vertical-align: top;
    }
    .reply-info {
      display: inline-block;
      margin-left: 5px;
      width: 90%;
      @media screen and (max-width: 1200px) {
        width: 80%;
      }
      .reply-input {
        min-height: 20px;
        line-height: 22px;
        padding: 10px 10px;
        color: #ccc;
        background-color: #fff;
        border-radius: 5px;
        &:empty:before {
          content: attr(placeholder);
        }
        &:focus:before {
          content: none;
        }
        &:focus {
          padding: 8px 8px;
          border: 2px solid blue;
          box-shadow: none;
          outline: none;
        }
      }
    }
    .reply-btn-box {
      height: 25px;
      margin: 10px 0;
      .reply-btn {
        position: relative;
        float: right;
        margin-right: 15px;
      }
    }
  }
  .my-comment-reply {
    margin-left: 50px;
    .reply-input {
      width: flex;
    }
  }
}
</style>